{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}
<style>
    body.login {
        background: linear-gradient(135deg, #3498db, #2c3e50);
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 0;
        margin: 0;
    }
    
    .login #header {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    
    .login #header h1 {
        font-size: 24px;
        text-align: center;
        margin: 0 0 20px 0;
    }
    
    .login #content {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 8px;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
        padding: 30px;
        width: 400px;
        max-width: 90%;
        margin: 0 auto;
    }
    
    .login .form-row {
        padding: 5px 0;
    }
    
    .login .form-row label {
        font-size: 14px;
        color: #444;
        margin-bottom: 5px;
        display: block;
    }
    
    .login .form-row input {
        padding: 12px;
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
    }
    
    .login .form-row input:focus {
        border-color: #3498db;
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        outline: none;
    }
    
    .login .submit-row {
        padding: 15px 0 0 0;
        background: transparent;
        border: none;
        text-align: center;
    }
    
    .login .submit-row input {
        background: #3498db;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        transition: background 0.2s;
        width: 100%;
    }
    
    .login .submit-row input:hover {
        background: #2980b9;
    }
    
    .login .errornote {
        background: #f8d7da;
        color: #721c24;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    
    .login-logo {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .login-logo img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    
    .login-footer {
        text-align: center;
        margin-top: 20px;
        color: white;
        font-size: 12px;
    }
</style>
{% endblock %}

{% block bodyclass %}login{% endblock %}

{% block usertools %}{% endblock %}

{% block nav-global %}{% endblock %}

{% block nav-sidebar %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
<div class="login-logo">
    <img src="{% static 'player/images/icon.png' %}" alt="Logo">
</div>

{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% blocktranslate count counter=form.errors.items|length %}请更正下面的错误。{% plural %}请更正下面的错误。{% endblocktranslate %}
</p>
{% endif %}

{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<p class="errornote">
    {{ error }}
</p>
{% endfor %}
{% endif %}

<div id="content-main">
{% if user.is_authenticated %}
<p class="errornote">
{% blocktranslate trimmed %}
    您已经登录为 {{ username }}，但您没有权限访问此页面。您想用不同的账号登录吗？
{% endblocktranslate %}
</p>
{% endif %}

<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <div class="form-row">
    {{ form.username.errors }}
    {{ form.username.label_tag }} {{ form.username }}
  </div>
  <div class="form-row">
    {{ form.password.errors }}
    {{ form.password.label_tag }} {{ form.password }}
    <input type="hidden" name="next" value="{{ next }}">
  </div>
  {% url 'admin_password_reset' as password_reset_url %}
  {% if password_reset_url %}
  <div class="password-reset-link">
    <a href="{{ password_reset_url }}">{% translate '忘记密码?' %}</a>
  </div>
  {% endif %}
  <div class="submit-row">
    <input type="submit" value="{% translate '登录' %}">
  </div>
</form>

</div>

<div class="login-footer">
    <p>音乐推荐系统 &copy; {% now "Y" %} BHML. 保留所有权利.</p>
</div>
{% endblock %} 